<template>
  <basic-container class="file" v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      ref="file"
      hideFilterBtn
      openIndex
      operaColumnWidth="120"
      :pageInfo="pager"
      :listData="tableData"
      :dataInfo="dataInfo"
      :operaInfo="operaInfo"
      :menuList="menuList"
      :listLayout="['menu','filter']"
      :filterList="filterList"
      @menu-click="handleMenuClick"
      @btn-click="handleBtnClick"
    ></dataList>
    <v-dialog :show.sync="dialogVisible" v-if="dialogShow" width="800px" title="文件上传" @beforeClose="beforeClose">
      <v-upload ref="fileUpload" :busId="busId" modelType="file" @onSuccess="onSuccess" :autoLoadFiles="false" :isView="false" multiple v-model="fileList" />
      <span slot="foot">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button v-throttle="[commit]">上 传</el-button>
      </span>
    </v-dialog>
  </basic-container>
</template>

<script>
import { fetchList, delObj } from '~/admin/api/file'
export default {
  name: "file",
  provide () {
    return {
      initList: this.getListData
    };
  },
  beforeMount () {
    this.getListData()
  },
  data () {
    return {
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 10
      },
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      },
      filterList: [
        { label: '原始文件名', inputType: 'input', name: 'fileNote', placeholder: '请输入原始文件名', defaultValue: '' },
				{ label: '上传人', inputType: 'input', name: 'creapers', placeholder: '请输入上传人', defaultValue: '' },
				{ label: '创建时间', inputType: 'daterange', name: ['creatimeStart','creatimeEnd'],  defaultValue: ['',''] }
      ],
      // 页面loading
      loading: false,
      // 弹窗
      dialogVisible: false,
      busId: '',
      fileList: [],
      dialogShow: false
    }
  },
  computed: {
    //头部按钮
    menuList () {
      return this.getPermissions('sys_file_add') ? ['add'] : []
    },
    //权限
    permissionList (scope) {
      return {
        delBtn: this.getPermissions('sys_file_del')
      }
    },
    //数据表头
    dataInfo () {
      return [
        { label: '业务类型', prop: 'busiType', width: '150', 'show-overflow-tooltip': true },
        { label: '文件名', prop: 'fileName', width: '220', 'show-overflow-tooltip': true },
        { label: '原始文件名', prop: 'fileNote', width: '220', 'show-overflow-tooltip': true },
        //{ label: '文件类型', prop: 'fileType', width: '80', 'show-overflow-tooltip': true },
        { label: '上传人', prop: 'creapers', width: '100' },
        { label: '创建时间', prop: 'creatime', width: '160' },
      ]
    },
    //操作按钮
    operaInfo () {
      return [
        { label: '删除', name: 'del', verify: () => this.permissionList.delBtn },
        { label: '下载', name: 'down' },
      ]
    }
  },
  methods: {
    // 获取列表
    getListData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      let obj = {}
      for (let key in requestData) {
        if ((requestData[key] === 0 || requestData[key]) && requestData[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
          obj[key] = requestData[key]
        }
      }
      requestData = obj
      fetchList(requestData)
        .then(res => {
          const { total, current, size, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //菜单点击监听
    handleMenuClick (type) {
      switch (type) {
        case 'add':
          this.handleAdd()
          break;
        default:
          break;
      }
    },
    // 按钮点击监听
    handleBtnClick ({ type, row }) {
      switch (type) {
        case 'down':
          this.publicExport(row.fileName, `/admin/sys-file/download/${row.fileId}`)
          break;
        case 'del':
          this.rowDel(row)
          break;
        default:
          break
      }
    },
    // 删除
    rowDel (row) {
      this.$confirm('是否确认删除ID为"' + row.fileId + '"的日志?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.fileId)
      }).then(data => {
        this.getListData({ current: 1 })
        this.$message.success('删除成功')
      })
    },
    // 新增
    handleAdd () {
      this.dialogShow = true
      this.dialogVisible = true
    },
    //文件上传
    async onSuccess (response, file, fileList) {
      if (fileList === undefined || fileList.length <= 0) {
        this.$message.error('请选择要上传的文件！')
      } else {
        this.busId = response.data
        this.$message.success(`提交成功!`);
        this.dialogVisible = false;
        this.dialogShow = false;
        this.getListData({ current: 1 })
      }
    },
    //确定
    commit () {
      this.$refs.fileUpload.submit()
    },
    // 取消
    handleCancel () {
      this.dialogVisible = false;
      this.dialogShow = false;
      this.getListData({ current: 1 })
    },
    beforeClose () {
      this.handleCancel()
    }
  }
}
</script>
